<template>
  <div v-cloak>
    <div class="indexs" v-if="status === 200">
      <div
        class="follow acea-row row-between-wrapper"
        v-if="followHid && followUrl && !subscribe"
      >
        <div>点击“立即关注”即可关注公众号</div>
        <div class="acea-row row-middle">
          <div class="bnt" @click="followTap">立即关注</div>
          <span class="iconfont icon-guanbi" @click="closeFollow"></span>
        </div>
      </div>
      <div class="followCode" v-if="followCode">
        <div class="pictrue"><img :src="followUrl" /></div>
        <div class="mask" @click="closeFollowCode"></div>
      </div>
      <div class="header bg-color-main acea-row row-between-wrapper">
        <!-- <div class="logo">
          <img :src="logoUrl" v-if="logoUrl" />
          <img src="@assets/images/transparentLogo.png" v-else />
        </div> -->
        <router-link :to="'/search'" class="input acea-row row-middle">
          <span class="iconfont icon-xiazai5"></span>搜索商品
        </router-link>
        <router-link :to="'/customer/list'" class="sign">
          <img src="@/assets/images/zhenxing/message.svg" />
          <small class="font-color-white">消息</small>
        </router-link>
      </div>

      <!-- 可滑动 Tab -->
      <div class="scroll-nav">
        <span v-for="(item, index) in categoryList" :key="index" @click="categorySelected = index" :class="[categorySelected === index ? 'select' : '']" class="classify">{{ item.cate_name }}</span>
      </div>

      <!-- 轮播图 -->
      <div class="slider-banner" v-if="banner.length">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item, index) in banner" :key="index">
            <router-link
              :to="item.wap_url ? item.wap_url : ''"
              class="search acea-row row-middle"
            >
              <img :data-src="item.pic" class="swiper-lazy" />
              <div class="swiper-lazy-preloader"></div>
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="nav acea-row">
        <router-link
          :to="item.wap_url ? item.wap_url : ''"
          class="item"
          v-for="(item, index) in menus"
          :key="index"
        >
          <div class="pictrue"><img v-lazy="item.pic" alt="img" /></div>
          <div>{{ item.name }}</div>
        </router-link>
      </div>

      <!-- 待拼团订单列表 -->
      <div class="news acea-row row-between-wrapper" v-if="waitCombinationOrderList.length > 0">
        <div class="swiper-no-swiping swiperTxt">
          <swiper :options="swiperRoll">
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in waitCombinationOrderList"
              :key="index"
            >
              <router-link
                :to="`/activity/group_detail/${item.id}`"
                class="acea-row row-between-wrapper"
                style="flex-wrap: nowrap"
              >
                <img style="width: 7%; border-radius: 50%;" :src="item.avatar" alt="用户头像">
                <div class="text line1" style="width: 80%;">{{ item.nickname }} 发起了一起拼</div>
                <div class="iconfont icon-xiangyou"></div>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      
      <div class="wrapper" v-if="couponList.length > 0">
        <div class="title acea-row row-center-wrapper">
          <img src="@assets/images/leftTxt.png" />
          <span class="text">领优惠券</span>
          <img src="@assets/images/leftTxt.png" class="right" />
        </div>
        <div class="scroll-coupon">
          <swiper :options="swiperScroll">
            <swiper-slide v-for="(item, index) in getCouponList" :key="index">
              <div class="item" :class="item.is_use ? 'on' : ''">
                <div
                  class="coupon-slide acea-row row-between-wrapper"
                  @click="receiveCoupon(item.id, index)"
                >
                  <div class="left">
                    <div class="money">
                      <span
                        >¥<span class="num">{{ item.coupon_price }}</span></span
                      >满{{ item.use_min_price }}可用
                    </div>
                    <div class="data" v-if="item.end_time">
                      {{ item.start_time ? item.start_time + "-" : ""
                      }}{{ item.end_time }}
                    </div>
                  </div>
                  <div class="right gray" v-if="item.is_use === true">
                    已领取
                  </div>
                  <div class="right gray" v-else-if="item.is_use === 2">
                    已领完
                  </div>
                  <div class="right" v-else>立即领取</div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <router-link :to="'/user/get_coupon'" class="more"
          >查看更多<span class="iconfont icon-up"></span
        ></router-link>
      </div>
      <div class="wrapper" v-if="seckillList.length">
        <div class="title acea-row row-center-wrapper">
          <img src="@assets/images/leftTxt.png" />
          <span class="text">限时秒杀</span>
          <img src="@assets/images/leftTxt.png" class="right" />
        </div>
      </div>
      <div class="wrapper_seckill" v-if="seckillList.length">
        <div class="seckill">
          <swiper :options="seckillScroll">
            <swiper-slide v-for="(item, index) in seckillList" :key="index">
              <router-link
                :to="'/activity/seckill_detail/' + item.id + '/' + timeEnd"
                class="item swiper-slide"
              >
                <div class="pictrue">
                  <img :src="item.image" />
                </div>
                <div class="text">
                  <div class="name line1">{{ item.title }}</div>
                  <div>
                    <span class="money font-color-orange"
                      >￥{{ item.price }}</span
                    >
                    <span class="y_money">￥{{ item.ot_price }}</span>
                  </div>
                </div>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="wrapper_seckill" v-if="seckillList.length">
        <router-link :to="'/activity/goods_seckill'" class="more">
          查看更多
          <span class="iconfont icon-up"></span>
        </router-link>
      </div>
      <div class="wrapper activity acea-row row-between-wrapper">
        <router-link
          :to="item.wap_link ? item.wap_link : ''"
          class="item"
          v-for="(item, index) in activity"
          :key="index"
        >
          <img :src="item.pic" />
          <div class="text">
            <div class="name">{{ item.title }}</div>
            <div>{{ item.info }}</div>
          </div>
        </router-link>
      </div>
      <div class="wrapper" v-if="hotInfo.length">
        <div class="title acea-row row-center-wrapper">
          <img src="@assets/images/leftTxt.png" />
          <span class="text">热门榜单</span>
          <img src="@assets/images/leftTxt.png" class="right" />
        </div>
        <div class="hotList">
          <swiper :options="hotOption">
            <swiper-slide v-for="(k, indexw) in hotInfo" :key="indexw">
              <div class="list acea-row row-middle">
                <router-link
                  class="item"
                  :class="[isNovice && +item.privilege ? 'noviceLabel' : '']"
                  :to="{ path: '/detail/' + item.id }"
                  v-for="(item, indexn) in k.list"
                  :key="indexn"
                >
                  <div>
                    <div class="pictrue">
                      <img :src="item.image" class="right" />
                    </div>
                    <div class="name line1">
                      {{ item.store_name }}
                    </div>
                    <div class="money font-color-orange">
                      ￥{{ item.price }}
                    </div>
                  </div>
                </router-link>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <router-link :to="{ path: '/hot_new_goods/' + 2 }" class="more">
          查看更多
          <span class="iconfont icon-up"></span>
        </router-link>
      </div>
      <div class="wrapper" v-if="info.firstList.length > 0">
        <div class="title acea-row row-center-wrapper">
          <img src="@assets/images/leftTxt.png" />
          <span class="text">首发新品</span>
          <img src="@assets/images/leftTxt.png" class="right" />
        </div>
        <div class="newProduct acea-row row-between-wrapper">
          <router-link
            :to="{ path: '/detail/' + item.id }"
            class="item"
            v-for="(item, index) in info.firstList"
            :key="index"
            :class="[isNovice && +item.privilege ? 'noviceLabel' : '']"
          >
            <div class="pictrue"><img :src="item.image" /></div>
            <div class="text">
              <div class="name line1">{{ item.store_name }}</div>
              <div class="money font-color-orange">
                ￥<span class="num">{{ item.price }}</span>
              </div>
              <div class="acea-row row-between-wrapper">
                <div class="vip" v-if="item.vip_price && item.vip_price > 0">
                  ￥{{ item.vip_price }}<img src="@assets/images/vip.png" />
                </div>
                <div class="sale">已售{{ item.sales }}{{ item.unit_name }}</div>
              </div>
            </div>
          </router-link>
        </div>
        <router-link :to="{ path: '/hot_new_goods/' + 3 }" class="more">
          查看更多
          <span class="iconfont icon-up"></span>
        </router-link>
      </div>
      <div
        class="wrapper"
        v-if="info.bastBanner.length > 0 || info.bastList.length > 0"
      >
        <div class="title acea-row row-center-wrapper">
          <img src="@assets/images/leftTxt.png" />
          <span class="text">精品推荐</span>
          <img src="@assets/images/leftTxt.png" class="right" />
        </div>
        <div class="slider-banner advert" v-if="info.bastBanner.length > 0">
          <swiper :options="swiperBoutique">
            <swiper-slide v-for="(item, index) in info.bastBanner" :key="index">
              <router-link :to="item.wap_link ? item.wap_link : ''"
                ><img :src="item.img"
              /></router-link>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div
          class="boutique acea-row row-middle"
          v-if="info.bastList.length > 0"
        >
          <router-link
            :to="{ path: '/detail/' + item.id }"
            class="item"
            :class="[isNovice && +item.privilege ? 'noviceLabel' : '']"
            v-for="(item, index) in info.bastList"
            :key="index"
          >
            <div class="pictrue"><img :src="item.image" /></div>
            <div class="name line1">{{ item.store_name }}</div>
            <div class="money font-color-orange">￥{{ item.price }}</div>
          </router-link>
        </div>
        <router-link :to="{ path: '/hot_new_goods/' + 1 }" class="more">
          查看更多
          <span class="iconfont icon-up"></span>
        </router-link>
      </div>
      <div class="wrapper" v-if="benefit.length > 0">
        <div class="title acea-row row-center-wrapper">
          <img src="@assets/images/leftTxt.png" />
          <span class="text">促销单品</span>
          <img src="@assets/images/leftTxt.png" class="right" />
        </div>
        <div class="newProduct acea-row row-between-wrapper">
          <router-link
            :to="{ path: '/detail/' + item.id }"
            class="item"
            :class="[isNovice && +item.privilege ? 'noviceLabel' : '']"
            v-for="(item, index) in benefit"
            :key="index"
          >
            <div class="pictrue"><img :src="item.image" /></div>
            <div class="text">
              <div class="name line1">{{ item.store_name }}</div>
              <div class="money font-color-orange">
                ￥<span class="num">{{ item.price }}</span>
              </div>
              <div class="acea-row row-between-wrapper">
                <div class="y_money">￥{{ item.ot_price }}</div>
                <div class="sale">已售{{ item.stock }}{{ item.unit_name }}</div>
              </div>
            </div>
          </router-link>
        </div>
        <router-link :to="'/promotion'" class="more">
          查看更多
          <span class="iconfont icon-up"></span>
        </router-link>
      </div>
      <Coupon-window
        :coupon-list="couponList"
        v-if="showCoupon"
        @checked="couponClose"
        @close="couponClose"
      ></Coupon-window>
      <div style="height:1.2rem;"></div>
    </div>
    <loadLogo v-else></loadLogo>
  </div>
</template>
<style scoped>
.scroll-nav { 
  color: #fff; padding: 0 .3rem; overflow: hidden;
}
.scroll-nav .classify {
  display: inline-block; padding: .15rem .15rem .1rem; margin-right: .2rem;
}
.scroll-nav .classify.select {
  border-bottom: .03rem solid #fff;
}

.indexs .follow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.36);
  height: 0.8rem;
  font-size: 0.28rem;
  color: #fff;
  padding: 0 0.3rem;
}
.indexs .follow .bnt {
  width: 1.6rem;
  height: 0.5rem;
  background-color: #784efa;
  border-radius: 0.25rem;
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.5rem;
}
.indexs .follow .iconfont {
  font-size: 0.3rem;
  margin-left: 0.29rem;
}
.indexs .followCode .pictrue {
  width: 5rem;
  height: 7.2rem;
  border-radius: 12px;
  left: 50%;
  top: 50%;
  margin-left: -2.5rem;
  margin-top: -3.6rem;
  position: fixed;
  z-index: 99;
}
.indexs .followCode .pictrue img {
  width: 100%;
  height: 100%;
}
.indexs .follow {
  z-index: 100000;
}
.indexs .header {
  /* height: 0.8rem; */
  width: 100%;
  padding: 0.24rem 0.3rem 0 0.3rem;
  position: relative;
}
.indexs .header .logo {
  width: 1.27rem;
  height: 0.45rem;
}
.indexs .header .logo img {
  width: 100%;
  height: 100%;
}
.indexs .header .input {
  width: 5.6rem;
  margin-left: 3%;
  /* width: 4.6rem; */
  height: 0.64rem;
  border-radius: 0.32rem;
  background-color: #fff;
  font-size: 0.28rem;
  color: #bbb;
  padding: 0 0.3rem;
}
.indexs .header .input .iconfont {
  font-size: 0.33rem;
  margin-right: 0.16rem;
  height: 0.33rem;
}
.indexs .header .sign {
  width: 0.62rem;
  /* height: 0.44rem; */
}
.indexs .header .sign img {
  width: 0.44rem;
  height: 100%;
}
.indexs .header:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2rem;
  z-index: -1;
  content: "";
  height: 2rem;
  width: 100%;
  border-radius: 0 0 10% 10%;
  /* background-color: #00c049; */
  background-color: rgb(120, 78, 250);
}
.indexs .slider-banner {
  width: 6.9rem;
  height: 3.3rem;
  position: relative;
  margin: 0.3rem auto 0 auto;
}
.indexs .slider-banner img {
  width: 100%;
  height: 3.3rem;
  border-radius: 0.2rem;
}
.indexs .slider-banner .swiper-pagination {
  bottom: 0.15rem;
}

.indexs .nav {
  padding-top: 0.38rem;
}
.indexs .nav .item {
  width: 25%;
  text-align: center;
  font-size: 0.28rem;
  margin-bottom: 0.35rem;
  color: #333;
}
.indexs .nav .item .pictrue {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0 auto 0.17rem auto;
}
.indexs .nav .item .pictrue img {
  width: 100%;
  height: 100%;
}
.indexs .news {
  position: fixed;
  bottom: 8%;
  z-index: 100;
  left: 0;
  right: 0;
  height: 0.6rem;
  width: 6.9rem;
  background-color: rgba(0, 0, 0, .5);
  /* background-image: -moz-linear-gradient(to right, #04d604 0%, #00c17b 100%);
  background-image: -webkit-linear-gradient(to right, #04d604 0%, #00c17b 100%);
  background-image: linear-gradient(to right, #04d604 0%, #00c17b 100%); */
  border-radius: 0.3rem;
  padding: 0 0.28rem;
  margin: 0 auto;
  overflow: hidden;
}
.indexs .news .iconfont {
  font-size: 0.3rem;
  color: #fff;
}
.indexs .news .swiper-slide {
  height: 100%;
}
.indexs .news .swiperTxt {
  /* width: 5.86rem; */
  width: 100%;
  height: 100%;
  line-height: 0.6rem;
  overflow: hidden;
}
.indexs .news .swiperTxt .swiper-container {
  height: 100%;
}
.indexs .news .swiperTxt .text {
  /* width: 5.55rem; */
  color: #fff;
  font-size: 0.26rem;
}
.indexs .news .swiperTxt .iconfont {
  font-size: 0.28rem;
  color: #fff;
}
.indexs .wrapper {
  width: 100%;
  background-color: #fff;
  margin-top: 0.2rem;
}
.indexs .wrapper .title {
  font-size: 0.34rem;
  font-weight: bold;
  color: #282828;
  height: 0.97rem;
}
.indexs .wrapper .title img {
  width: 0.42rem;
  height: 0.26rem;
  display: block;
}
.indexs .wrapper .title .text {
  padding: 0 0.2rem;
}
.indexs .wrapper .title .right {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}
.indexs .wrapper .scroll-coupon {
  white-space: nowrap;
  padding-left: 0.3rem;
  overflow: hidden;
  margin-top: 0.06rem;
}
.indexs .wrapper .scroll-coupon .swiper-slide {
  width: 3.4rem;
  margin-right: 0.1rem;
}
.indexs .wrapper .scroll-coupon .item {
  display: inline-block;
  width: 3.4rem;
  height: 1.4rem;
  background: url("../../assets/images/couponRed.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
.indexs .wrapper .scroll-coupon .item.on {
  background-image: url("../../assets/images/couponGray.png");
}
.indexs .wrapper .scroll-coupon .item:nth-last-child(1) {
  margin-right: 0.3rem;
}
.indexs .wrapper .scroll-coupon .item .coupon-slide {
  width: 100%;
  height: 100%;
}
.indexs .wrapper .scroll-coupon .item .coupon-slide .left {
  width: 2.6rem;
  padding-bottom: 0.07rem;
}
.indexs .wrapper .scroll-coupon .item .coupon-slide .left .money {
  font-size: 0.24rem;
  font-weight: bold;
  text-align: center;
}
.indexs .wrapper .scroll-coupon .item .coupon-slide .left .money .num {
  font-size: 0.42rem;
  margin-right: 0.05rem;
}
.indexs .wrapper .scroll-coupon .item .coupon-slide .left .data {
  font-size: 0.18rem;
  text-align: center;
  margin-top: 0.07rem;
}
.indexs .wrapper .scroll-coupon .item .coupon-slide .right {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 0.2rem;
  font-weight: bold;
  padding: 0 0.2rem 0 0.08rem;
}
.indexs .wrapper .more,
.indexs .wrapper_seckill .more {
  font-size: 0.24rem;
  color: #999;
  text-align: center;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-top: 0.05rem;
  display: block;
}
.indexs .wrapper .more .iconfont,
.indexs .wrapper_seckill .more .iconfont {
  font-size: 0.24rem;
  margin-left: 0.08rem;
}
.indexs .wrapper_seckill {
  background-color: #fff;
  padding-top: 0.01rem;
}
.indexs .wrapper_seckill .seckill {
  padding-left: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.14rem;
}
.indexs .wrapper_seckill .seckill .swiper-slide {
  width: 1.9rem;
  margin-right: 0.18rem;
}
.indexs .wrapper_seckill .seckill .item {
  width: 1.9rem;
  display: inline-block;
}
.indexs .wrapper_seckill .seckill .item:nth-last-child(1) {
  margin-right: 0.3rem;
}
.indexs .wrapper_seckill .seckill .item .pictrue {
  width: 100%;
  height: 1.9rem;
}
.indexs .wrapper_seckill .seckill .item img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.indexs .wrapper_seckill .seckill .item .text .name {
  font-size: 0.22rem;
  color: #333;
  margin-top: 0.07rem;
}
.indexs .wrapper_seckill .seckill .item .text .money {
  font-size: 0.24rem;
  font-weight: bold;
}
.indexs .wrapper_seckill .seckill .item .text .y_money {
  font-size: 0.2rem;
  color: #999;
  text-decoration: line-through;
  margin-left: 0.1rem;
}
.indexs .wrapper.activity {
  padding: 0.3rem;
}
.indexs .wrapper.activity .item {
  width: 3.35rem;
  height: 1.8rem;
  position: relative;
}
.indexs .wrapper.activity .item img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.indexs .wrapper.activity .item .text {
  position: absolute;
  top: 0.25rem;
  left: 0.3rem;
  font-size: 0.18rem;
  color: #8c645f;
}
.indexs .wrapper.activity .item .text .name {
  font-size: 0.28rem;
  color: #4e1616;
  margin-bottom: 0.03rem;
}
.indexs .wrapper .hotList {
  width: 6.9rem;
  margin: 0.15rem auto 0 auto;
}
.indexs .wrapper .hotList .swiper-container {
  height: 3.6rem;
}
.indexs .wrapper .hotList .swiper-pagination {
  bottom: -0.08rem;
}
.indexs .wrapper .hotList .list .item {
  width: 2.18rem;
}
.indexs .wrapper .hotList .list .item ~ .item {
  margin-left: 0.17rem;
}
.indexs .wrapper .hotList .list .item .pictrue {
  width: 100%;
  height: 2.18rem;
}
.indexs .wrapper .hotList .list .item .pictrue img {
  width: 100%;
  height: 100%;
}
.indexs .wrapper .hotList .list .item .name {
  font-size: 0.26rem;
  color: #333;
  margin-top: 0.12rem;
}
.indexs .wrapper .hotList .list .item .money {
  font-size: 0.3rem;
  font-weight: bold;
}
.indexs .wrapper .newProduct {
  padding: 0 0.3rem;
  margin-top: -0.14rem;
}
.indexs .wrapper .newProduct .item {
  width: 3.3rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.06rem;
  margin-top: 0.29rem;
}
.indexs .wrapper .newProduct .item .pictrue {
  width: 100%;
  height: 3.3rem;
}
.indexs .wrapper .newProduct .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem 0.06rem 0 0;
}
.indexs .wrapper .newProduct .item .text {
  padding: 0.18rem 0.15rem 0.27rem 0.15rem;
}
.indexs .wrapper .newProduct .item .text .name {
  font-size: 0.3rem;
  color: #282828;
}
.indexs .wrapper .newProduct .item .text .money {
  font-weight: bold;
  font-size: 0.26rem;
  margin: 0.03rem 0 0.06rem 0;
}
.indexs .wrapper .newProduct .item .text .money .num {
  font-size: 0.34rem;
}
.indexs .wrapper .newProduct .item .text .y_money {
  font-size: 0.2rem;
  color: #999;
  text-decoration: line-through;
  margin-left: 0.1rem;
}
.indexs .wrapper .newProduct .item .text .vip {
  font-size: 0.24rem;
  font-weight: bold;
  color: #282828;
}
.indexs .wrapper .newProduct .item .text .vip img {
  width: 0.46rem;
  height: 0.21rem;
}
.indexs .wrapper .newProduct .item .text .sale {
  font-size: 0.22rem;
  color: #aaa;
}
.indexs .wrapper .advert {
  width: 6.9rem;
  height: 2.6rem;
  position: relative;
  margin: 0.15rem auto 0 auto;
}
.indexs .wrapper .advert img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.indexs .wrapper .advert .swiper-pagination {
  bottom: 0.15rem;
}
.indexs .wrapper .boutique {
  padding: 0 0.3rem;
}
.indexs .wrapper .boutique .item {
  width: 2.18rem;
  margin: 0.17rem 0.18rem 0 0;
}
.indexs .wrapper .boutique .item:nth-of-type(3n) {
  margin-right: 0;
}
.indexs .wrapper .boutique .item .pictrue {
  width: 100%;
  height: 2.18rem;
}
.indexs .wrapper .boutique .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.indexs .wrapper .boutique .item .name {
  font-size: 0.26rem;
  color: #333;
  margin-top: 0.15rem;
}
.indexs .wrapper .boutique .item .money {
  font-size: 0.3rem;
  font-weight: bold;
}
</style>
<script>
import "@assets/css/swiper.min.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

import { getCoupon, getCouponReceive } from "@api/user";
import CouponWindow from "@components/CouponWindow";
import { getHomeData, getShare, follow } from "@api/public";
import { getSeckillConfig, getSeckillList, getWaitCombinationList } from "@api/activity";
import { getGroomList, getCategory } from "@api/store";
import cookie from "@utils/store/cookie";
import { openShareAll } from "@libs/wechat";
import { isWeixin } from "@utils/index";

const HAS_COUPON_WINDOW = "has_coupon_window";
export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide,
    CouponWindow
  },
  props: {},
  data: function() {
    return {
      isNovice: false,
      status: 0,
      followUrl: "",
      showCoupon: false,
      followHid: true,
      subscribe: false,
      followCode: false,
      logoUrl: "",
      banner: [],
      menus: [],
      roll: [],
      getCouponList: [],
      couponList: [],
      seckillList: [],
      timeId: 0, //秒杀时间段编号;
      timeEnd: 0, //秒杀结束时间;
      activity: [],
      hotInfo: [],
      info: {
        fastList: [],
        bastBanner: [],
        firstList: [],
        bastList: []
      },
      benefit: [],

      //////////////////////////////////////////////////////////////////////////////// 轮播图设置开始
      swiperOption: {       // header轮播广告图
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        lazy: {
          loadPrevNext: true
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperRoll: {        // 底部固定轮播待拼团订单信息
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 800
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      hotOption: {    // 热门榜单-可左右滑动商品组
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: false,
        loop: false,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      seckillScroll: {    // 限时秒杀-可左右滑动商品组
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperScroll: {   // 优惠券领取-可左右滑动优惠券组
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperBoutique: {   // 精品推荐-轮播广告图
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      //////////////////////////////////////////////////////////////////////////////// 轮播图设置结束
      waitCombinationOrderList: [], //待拼团订单列表
      categoryList: [], 
      categorySelected: 0
    };
  },
  watch: {
    $route(n) {
      if (n.name === "Index") {
        this.getCoupon();
        this.getSeckillConfig();
        this.isNovice = +sessionStorage.ISNOVICE ? true : false;
      }
    }
  },
  mounted: function() {
    this.getHomeData();
    this.getCategoryData();
    this.getCoupon();
    this.getSeckillConfig();
    this.getIndexGroomList();
    this.getWaitCombinationOrder();
  },
  methods: {
    closeFollow() {
      this.followHid = false;
    },
    followTap() {
      this.followCode = true;
      this.followHid = false;
    },
    closeFollowCode() {
      this.followCode = false;
      this.followHid = true;
    },
    getFollow() {
      follow()
        .then(res => {
          this.followUrl = res.data.path;
        })
        .catch(() => {});
    },
    getHomeData: function() {
      let that = this;
      getHomeData().then(res => {
        that.status = res.status;
        that.logoUrl = res.data.logoUrl;
        that.$set(that, "banner", res.data.banner);
        that.$set(that, "menus", res.data.menus);
        that.$set(that, "roll", res.data.roll);
        that.$set(that, "activity", res.data.activity);
        that.activity.splice(1, 1);
        that.$set(that, "info", res.data.info);
        that.$set(that, "benefit", res.data.benefit);
        that.$set(that, "couponList", res.data.couponList);
        that.subscribe = res.data.subscribe;
        that.setOpenShare();
        this.showCoupon =
          !cookie.has(HAS_COUPON_WINDOW) &&
          res.data.couponList.some(coupon => coupon.is_use);

        this.isNovice = +sessionStorage.ISNOVICE ? true : false;
      });
      this.getFollow();
    },
    getCategoryData: function() {
      let that = this;
      getCategory().then(res => {
        console.log('获取分类', res);
        this.categoryList = res.data;
        this.categoryList.unshift({
          cate_name: '热门'
        })
        // let menus = [],
        //   nav = res.data;
        // nav.forEach(function(val, index) {
        //   if (index < 8) {
        //     menus.push(val);
        //   }
        // });
        // that.$set(that, "menus", menus);
      });
    },
    getIndexGroomList: function() {
      let that = this;
      getGroomList(2)
        .then(res => {
          let hotList = res.data.list || [];
          let count = Math.ceil(hotList.length / 3);
          let hotArray = [];
          for (var i = 0; i < count; i++) {
            let list = hotList.slice(i * 3, i * 3 + 3);
            if (list.length) hotArray.push({ list: list });
          }
          that.hotInfo = hotArray;
        })
        .catch(function(res) {
          this.$dialog.toast({ mes: res.msg });
        });
    },
    getCoupon: function() {
      let that = this;
      let q = { page: 1, limit: 6 };
      getCoupon(q).then(res => {
        that.$set(that, "getCouponList", res.data);
      });
    },
    getWaitCombinationOrder: function() {
      let that = this;
      getWaitCombinationList().then(res => {
        console.log('拼团订单', res);
        this.waitCombinationOrderList = res.data;
      });
    },
    receiveCoupon: function(id, index) {
      let that = this;
      let list = that.getCouponList;
      getCouponReceive(id)
        .then(function() {
          list[index].is_use = true;
          that.$dialog.toast({ mes: "领取成功" });
        })
        .catch(function(res) {
          that.$dialog.toast({ mes: res.msg });
        });
    },
    //  秒杀时间段
    getSeckillConfig: function() {
      let that = this;
      getSeckillConfig().then(res => {
        let seckillTimeIndex = res.data.seckillTimeIndex;
        that.$set(that, "timeId", res.data.seckillTime[seckillTimeIndex].id);
        that.$set(that, "timeEnd", res.data.seckillTime[seckillTimeIndex].stop);
        that.getSeckillList();
      });
    },
    //  秒杀列表
    getSeckillList: function() {
      let that = this;
      getSeckillList(that.timeId, { page: 1, limit: 20 }).then(res => {
        that.$set(that, "seckillList", res.data);
      });
    },
    couponClose() {
      cookie.set(HAS_COUPON_WINDOW, 1);
    },
    setOpenShare() {
      if (isWeixin()) {
        getShare().then(res => {
          var data = res.data.data;
          var configAppMessage = {
            desc: data.synopsis,
            title: data.title,
            link: location.href,
            imgUrl: data.img
          };
          openShareAll(configAppMessage);
        });
      }
    }
  }
};
</script>
